<!--
 * @Date: 2025-03-24 14:48:09
 * @LastEditors: zl 1077167261@qq.com
 * @LastEditTime: 2025-04-26 20:59:52
 * @FilePath: \piano_1\index.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>钢琴键盘</title>
    <link rel="stylesheet" href="./index.css" />
  </head>

  <body class="day-mode">
    <div class="mode-container">
      <button class="mode-switch" onclick="toggleMode()">
        <span class="mode-text">黑夜模式</span>
        <span class="mode-icon">🌙</span>
      </button>
    </div>
    <canvas width="900" height="200"></canvas>

    <div class="audios_tools"></div>
    <div class="keyboard day-mode"></div>
    <footer>by-不懂先生 yeah126139163@163.com</footer>
    <script src="./js/jq10.js"></script>
    <script src="./js/keyboard.min.js"></script>
    <script src="./js/canvas.js"></script>
    <script>
      // 获取焦点
      $('textarea').focus()
      $('.keyboard').keyboard({})
      let audios_tools = document.querySelector('.audios_tools')
      var pw = new ParticleWave('canvas')
      pw.run()

      // 模式切换功能
      function toggleMode() {
        const body = document.body
        const keyboard = document.querySelector('.keyboard')
        const modeText = document.querySelector('.mode-text')
        const modeIcon = document.querySelector('.mode-icon')

        if (body.classList.contains('day-mode')) {
          body.classList.remove('day-mode')
          body.classList.add('night-mode')
          keyboard.classList.remove('day-mode')
          keyboard.classList.add('night-mode')
          modeText.textContent = '白天模式'
          modeIcon.textContent = '☀️'
        } else {
          body.classList.remove('night-mode')
          body.classList.add('day-mode')
          keyboard.classList.remove('night-mode')
          keyboard.classList.add('day-mode')
          modeText.textContent = '黑夜模式'
          modeIcon.textContent = '🌙'
        }
      }

      let audios = document.querySelectorAll('audio')
      document.body.onkeypress = function (e) {
        // 转为小写，转为 ascii码
        // "".charCodeAt
        // 97 122
        // var asciiKey = e.key.toLowerCase().charCodeAt();
        var asciiKey
        if (e.key) {
          asciiKey = e.key.toLowerCase().charCodeAt()
        } else {
          asciiKey = $(e.target).attr('data_index')
        }

        // 32 自动播放
        if (asciiKey == 32) {
          // console.log($.trim($(".content").html()));
          var content = $.trim($('.content').html())
          let tmpIndex = 0
          var timeId = setInterval(function () {
            tmpLetterIndex = content[tmpIndex].charCodeAt()
            if (tmpLetterIndex != 32) {
              // createAudio(`musics/paino${tmpLetterIndex-64}.mp3`);
              $("li[data_index='" + tmpLetterIndex + "']").click()
            }
            tmpIndex++
            if (tmpIndex == content.length) {
              clearInterval(timeId)
              return
            }
          }, 700)

          return
        }

        if (asciiKey < 97 || asciiKey > 122) {
          return
        }
        let index = asciiKey - 96
        createAudio(`musics/paino${index}.mp3`)
      }

      $('.keyboard').on('click', 'li', function (e) {
        let index = $(e.target).attr('data_index')

        if (index < 65 || index > 90) {
          return
        }
        index = index - 64
        createAudio(`musics/paino${index}.mp3`)
      })

      // 动态创建audio
      function createAudio(src) {
        // audios_tools
        let audio = document.createElement('audio')
        audio.autoplay = true
        audio.src = src

        // audio
        audios_tools.appendChild(audio)
        audio.onended = function () {
          audios_tools.removeChild(audio)
        }
      }
    </script>
  </body>
</html>
